import React,{lazy,Suspense} from "react";
import {Outlet, useRoutes} from "react-router-dom";
import AuthComponent from "@/components/AuthComponent";
import Loading from "@/components/Loading";
// 非懒加载：会将所有的路由打包至一个JS中
// 懒加载：每一个通过lazy加载的路由即是一个JS文件
const lazyLoading = function(path:string){
    const Com = lazy(()=>import("@/pages/"+path))
    return (
        <Suspense fallback={<Loading/>}>
            <Com></Com>
        </Suspense>
    )
}
const useRenderRouters = function (){
    const renderRoutes = useRoutes([
        {
            path:"/",
            element:lazyLoading("Index"),
            // element:(
            //     <AuthComponent>
            //         {lazyLoading("Index")}
            //     </AuthComponent>
            // ),
            children:[
                {
                    index:true,
                    element:lazyLoading("Home")
                },{
                    path:"cmn",
                    element:<Outlet/>,
                    children:[
                        {
                            path:"dict",
                            element:lazyLoading("cmn/Dict")
                        },
                        {
                            path:"attribute",
                            element:lazyLoading("cmn/Attribute")
                        }
                    ]
                }
            ]
        },{
            path:"/login",
            element:lazyLoading("Login")
        },{
            path:"*",
            element:lazyLoading("NotFound")
        }
    ])
    return renderRoutes;
}
export default useRenderRouters;
